<div id="headId" class="row RowSpace" style="display:flex;">
    <div style="display:flex;width:30%;">
        <Label>部门</Label>
        <div class="InputDiv" style="width:150px;">
            <Refer EntityName="Department" WindowTitle="部门" value="Department" change="onDepartmentChange(records)">
                <RColumn type="0" width="150px" displayname="编码" valuefield="Code"></RColumn>
                <RColumn type="textbox" width="150px" displayname="名称" valuefield="Name"></RColumn>
                <RColumn width="286px" displayname="备注" valuefield="Remark"></RColumn>
            </Refer>
      </div>
    </div>
    <div style="display:flex;justify-content:flex-end;width:70%;">
        <Label style="margin-left:20px;">连接异常</Label>
        <img class="TerminalHeadImg" ng-src="modules/CBO/client/Images/{{ConnectImg}}"/>
        <Label style="margin-left:20px;">解析异常</Label>
        <img class="TerminalHeadImg" ng-src="modules/CBO/client/Images/{{AnalyzeImg}}"/>
        <Label style="margin-left:20px;">运行正常</Label>
        <img class="TerminalHeadImg" ng-src="modules/CBO/client/Images/{{NormalImg}}"/>
    </div>
</div>

<div class="row RowSpace TerminalsDiv" style="height: {{TerminalsDivHeight}}px;">
    <div style="display:flex;min-height:{{DivHeight}}px;" ng-repeat="row in Datas">
        <div class="TerminalDiv" ng-repeat="stRecord in row" style="width:{{DivWidth}}px;min-width:{{DivWidth}}px;height:{{DivHeight}}px;">
            <img class="TerminalImg {{stRecord == FocusedRecord ? 'TerminalFocusedRecord' : ''}}" style="width:{{ImgWidth}}px;height:{{ImgHeight}}px;" ng-src="modules/CBO/client/Images/{{stRecord.Terminal._Img}}" ng-click="terminalClick(stRecord)"/>
            <div class="TerminalNameDiv" style="width:{{ImgWidth}}px;" ng-click="terminalClick(stRecord)" title="{{stRecord.Terminal.Name}}">
                {{stRecord.Terminal.Name}}
            </div>
        </div>
    </div>
</div>

<div>
    <div class="row RowSpace" style="margin-top:10px;">
        <div class="LableDiv"><Label>名称</Label></div>
        <div class="InputDiv"><TextBox Enabled="false" value="FocusedRecord.Terminal.Name"></TextBox></div>
        <div class="LableDiv"><Label>唯一标识</Label></div>
        <div class="InputDiv"><TextBox Enabled="false" value="FocusedRecord.Terminal.UniqueID"></TextBox></div>
        <div class="LableDiv"><Label>工位</Label></div>
        <div class="InputDiv"><TextBox Enabled="false" value="FocusedRecord.WorkLocation.Name"></TextBox></div>
        <div class="LableDiv"><Label>作业</Label></div>
        <div class="InputDiv"><TextBox Enabled="false" value="FocusedRecord.Work.Name"></TextBox></div>
    </div>
    <div class="row RowSpace" style="margin-bottom:20px;">
        <div class="LableDiv"><Label>最后请求</Label></div>
        <div class="InputDiv"><Calendar Enabled="false" value="FocusedRecord.Terminal.LastRequestDate"></Calendar></div>
        <div class="LableDiv"><Label>异常信息</Label></div>
        <div class="InputDiv" style="width:59%;"><TextBox Enabled="false" value="FocusedRecord.Terminal.ExceptionInfo"></TextBox></div>
        <div style="width:8%;display:flex;justify-content: right;padding-left:5px;">
            <ModalBox Enabled="{{FocusedRecord != null}}" Text="异常明细" WindowTitle='设备异常明细' beforeshow="btnTerminalException()" IsDisplayBtn="false">
              <div class="row RowSpace">
                <DataGrid id="DataGrid1" module="Module.DeviceMonitor" IsEdit="false" IsAutoLoad="false"  height="500px">
                    <Column Type="TextBox" DisplayName="终端名称" width="80px" ValueField="TerminalName" IsOrder="false"></Column>
                    <Column Type="DropDownList" DisplayName="执行结果" width="70px" ValueField="ExecuteResult" Enum="ExecuteResultEnum"></Column>
                    <Column Type="Calendar" DisplayName="扫描时间" width="140px" ValueField="ScanTime"></Column>
                    <Column Type="Calendar" DisplayName="请求时间" width="140px" ValueField="RequestTime"></Column>
                    <Column Type="Calendar" DisplayName="完成时间" width="140px" ValueField="EndTime"></Column>
                    <Column Type="TextBox" DisplayName="异常信息" width="200px" ValueField="ExceptionInfo"></Column>
                </DataGrid>
              </div>
            </ModalBox>
        </div>
    </div>
</div>

<style type="text/css">
.TerminalsDiv{
    overflow:auto;
    overflow:-Scroll;
    overflow-x:hidden;
    margin-top: 10px;
    width: 100%;    
    display: flex;
    flex-direction: column;
    background-color: #FAFAFA;

    border-right: outset #FFF 1px;
    border-bottom: outset #FFF 1px;
    border-top: solid #DDD 1px;
    border-left: solid #DDD 1px;
}
.TerminalDiv{
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.TerminalNameDiv{
    height: 20px;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;          /*超过宽度,结束位置显示"..."*/
    white-space: nowrap;              /*强制在同一行内显示所有文本*/
    font-size: 12px;    
}
.TerminalImg{
    cursor: pointer;
}
.TerminalFocusedRecord{
    border: solid #31708f 1px;
}
.TerminalHeadImg{
    margin-left: 5px;
    width: 25px;
    height: 25px;
}
</style>